<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .boss {
            width: 200px;
            height: 150px;
            background-color: skyblue;
        }

        ul {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .css {
            border: 2px solid greenyellow;
        }

        .mouse {
            width: 100px;
            height: 100px;
            background-color: aqua;

        }
    </style>
</head>

<body>
    <!-- 鼠标事件 -->
    <div class="mouse">
        鼠标事件
    </div>
    <!-- 键盘事件 -->
    <input class="key" type="text" placeholder="键盘事件">

    <!--案例：搜索框 -->
    <div class="boss">
        <input class="mi" type="text">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
<script>
    // 事件
    // 1鼠标事件：click点击，mouseenter经过，mouseleave离开
    const mouse = document.querySelector('.mouse');
    console.log(mouse)
    mouse.addEventListener('mouseenter', function () {
        console.log('鼠标经过');
    })
    mouse.addEventListener('mouseleave', function () {
        console.log('鼠标移开');
    })
    // 2键盘事件：keydown，keyup
    let key = document.querySelector('.key');
    console.log(key);
    key.addEventListener('keydown', function () {
        console.log('键盘按下');
    })
    key.addEventListener('keyup', function () {
        console.log('键盘抬起');
    })
    // 案例：搜索框
    // 1.焦点事件
    //2.得到焦点显示ul
    const input = document.querySelector('.mi');
    console.log(input)
    const ul = document.querySelector('ul');
    console.log(ul);
    input.addEventListener('focus', function () {
        ul.style.display = 'block';
        ul.classList.add('css');
    })
    input.addEventListener('blur', function () {
        input.classList.remove('css');
        ul.style.display = 'none';
    })
</script>

</html>